expoent.
DESIGN SYSTEM · v3.2 · JUN 2026

Os blocos de Lego
do expoent.

Tokens, componentes e padrões usados em todas as 65 telas. Mude algo aqui, muda em todo lugar.

01 · Cores

Paleta principal

Preto puro + laranja Expoent + cinzas. Verde Florescer só nas demos de marca-cliente. Verde sucesso semântico (#22C55E) e WhatsApp (#25D366) preservados.

Expoent Orange#FF5014accent · CTA principal
Orange Soft#FF8A50hover · acento secundário
Orange Deep#E04210pressed · ênfase
Ink#0B0B0Btexto · botões dark
Black Plus#050505fundo dark
White#FFFFFFsuperfície base

Cinzas & semânticos

Bg#EDEDEBfundo da app
Surface 2#F4F4F2chips, hover
Border#ECECEClinhas, divisores
Muted#8B8B8Etexto auxiliar
Success#22C55Eok · ativo
Warning#FFE066atenção
02 · Tipografia

Uma fonte só. Manrope.

Sans-serif única em toda interface. JetBrains Mono apenas em valores técnicos (códigos, métricas).

Display · 56px / 700
font:700 56px Manrope; letter-spacing:-0.035em
H1 · 38px / 700
font:700 38px Manrope; letter-spacing:-0.025em
H2 · 22px / 700
font:700 22px Manrope; letter-spacing:-0.015em
H3 / Label · 14px / 700
font:700 14px Manrope
Body · 13px / 500 — usado em descrições, parágrafos e células de tabela. Manter line-height confortável entre 1.5 e 1.6.
font:500 13px Manrope; line-height:1.55
EYEBROW · 10PX / 500 / .14EM UPPER
font:500 10px Manrope; letter-spacing:.14em; text-transform:uppercase
03 · Botões

5 variantes. Nunca mais.

Primário (laranja), Secundário (cinza claro), Dark (preto), Outline e Danger (vermelho outline). Tudo no formato pill.

Tamanhos

Com ícone trailing

04 · Chips & badges

Status, labels, filtros

Ativo ● ok ● atenção desconectado PRO NOVO QUENTE
05 · Cards

3 variantes principais

card · light
Métrica
↑ +12,4%
card · dark
Hero
accent overlay
card · accent
Destaque
premium · CTA
06 · Banco de ícones

Iconify · Phosphor Regular

2.000 ícones consistentes. Stroke 1,5px, 24×24, alinhamento ao baseline. Substitui os SVGs inline soltos.

<!-- Carregar via CDN -->
<link rel="stylesheet" href="https://api.iconify.design/phosphor.css">

<!-- Usar -->
<span class="iconify" data-icon="ph:rocket-launch"></span>
07 · Navegação · 4 hubs

Top nav simplificada

A nav antiga tinha 6+ itens dispersos (Studio, Leads, BI, Inbox, Mais). A nova organiza em 4 hubs por modo mental do usuário.

expoent.
Criar
Studio, Editor, Cortes IA, Banco, Brand Kit, Planner, Templates, Score Viral
Captar
Campanhas, Pipeline, Templates Campanha, Concorrentes, Radar, SEO Boost, Chat Widget, Link Bio
Converter
Inbox, Leads, Estacionamento, Agente Vendas, Propostas, Automações, Workflow Builder
Crescer
BI, Piloto Automático, Recomendações IA, Influenciadores, Roadmap, Academia, Status
08 · Espaçamento & Radius

Sistema de 4px

Tudo múltiplo de 4. Radius padronizados em 4 níveis. Sem números soltos.

xs · 6px6px
sm · 10px10px
md · 14px14px
lg · 22px22px
xl · 32px32px

Radius

6
10
14
22
pill 99
09 · Tokens · uso programático

Para o desenvolvedor

Variáveis CSS prontas pra colar em qualquer projeto da Expoent.

:root {
  /* color */
  --ex-bg:        #EDEDEB;
  --ex-surface:   #FFFFFF;
  --ex-surface-2: #F4F4F2;
  --ex-border:    #ECECEC;
  --ex-ink:       #0B0B0B;
  --ex-black:     #050505;
  --ex-muted:     #8B8B8E;

  /* brand */
  --ex-accent:        #FF5014;
  --ex-accent-soft:   #FF8A50;
  --ex-accent-deep:   #E04210;

  /* semantic */
  --ex-success: #22C55E;
  --ex-warning: #FFE066;
  --ex-danger:  #FF5014;
  --ex-wa:      #25D366;

  /* type */
  --ex-font: 'Manrope', system-ui, sans-serif;
  --ex-mono: 'JetBrains Mono', monospace;

  /* spacing */
  --ex-s-xs: 6px;
  --ex-s-sm: 10px;
  --ex-s-md: 14px;
  --ex-s-lg: 22px;
  --ex-s-xl: 32px;

  /* radius */
  --ex-r-xs: 6px;
  --ex-r-sm: 10px;
  --ex-r-md: 14px;
  --ex-r-lg: 22px;
  --ex-r-pill: 99px;

  /* shadow */
  --ex-shadow-lift: 0 8px 18px -8px rgba(11,11,11,.12);
  --ex-shadow-pop:  0 18px 40px -22px rgba(11,11,11,.5);
  --ex-glow-accent: 0 12px 28px -8px rgba(255,80,20,.45);
}